<template>
    <el-container>
        <el-header>
            <f-header></f-header>
        </el-header>
        <el-container>
            <el-aside :width="asideWidth">
                <f-menu></f-menu>
            </el-aside>
            <el-main>
                <f-tag-list :style="computedTagListStyle"></f-tag-list>
                <router-view :style="computedMainStyle" v-slot="{ Component }">
                    <keep-alive :max="10">
                        <component :is="Component"></component>
                    </keep-alive>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup>
import FHeader from '~/layouts/components/FHeader.vue'
import FMenu from '~/layouts/components/FMenu.vue'
import FTagList from '~/layouts/components/FTagList.vue'
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

// 定义一个计算属性来获取 store 中的 asideWidth
const asideWidth = computed(() => store.state.asideWidth);

// 计算 f-tag-list 的样式
const computedTagListStyle = computed(() => ({
  position: 'fixed',
  top: '64px',
  left: `${asideWidth.value}`,
  width: `calc(100% - ${asideWidth.value})`
}));
// 计算 main 的样式
const computedMainStyle = computed(() => ({
    'box-sizing': 'border-box',
    'margin-top': '44px',
    background: '#f3f4f6',
    padding: '20px',
    // position: 'fixed',
    // left: `${asideWidth.value}`,
    // width: `calc(100% - ${asideWidth.value})`,
    // height: '100%'
}));
</script>
<style lang="scss" scoped>
.el-aside {
    transition: all 0.2s;
}
// 修改头部布局的高度和内边距
:deep(.el-header) {
    --el-header-padding: 0;
    --el-header-height: 64px;
    padding: var(--el-header-padding);
    height: var(--el-header-height);
}
// 修改主体布局的内边距
:deep(.el-main) {
    --el-header-padding: 0;
    padding: var(--el-header-padding);
}
</style>